{% extends "templates/web.html" %}

{% macro email_login_body() -%}
{% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
<div class="page-card-body">
	<div class="form-group input-group-lg">
		<label class="form-label sr-only" for="login_email">{{ login_label or _("Email")}}</label>
		<div class="email-field">
			<input type="text" id="login_email" class="form-control"
				placeholder="{% if login_name_placeholder %}{{ login_name_placeholder  }}{% else %}{{ _('jane@example.com') }}{% endif %}"
				required autofocus autocomplete="username">

			<svg class="field-icon email-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
				xmlns="http://www.w3.org/2000/svg">
				<use class="es-lock" href="#es-line-email"></use>
			</svg>
		</div>
	</div>

	<div class="form-group input-group-lg">
		<label class="form-label sr-only" for="login_password">{{ _("Password") }}</label>
		<div class="password-field">
			<input type="password" id="login_password" class="form-control" placeholder="密码"
				autocomplete="current-password" required>

			<svg class="field-icon password-icon" width="16" height="16" viewBox="0 0 16 16" fill="none"
				xmlns="http://www.w3.org/2000/svg">
					<use class="es-lock" href="#es-line-lock"></use>
			</svg>
			<span toggle="#login_password" class="toggle-password text-muted">{{ _('Show') }}</span>
		</div>
	</div>

	<!-- <p class="forgot-password-message">
		<a href="#forgot">{{ _("Forgot Password?") }}</a>
	</p> -->
</div>
{% endif %}
<div id="particles-js"></div>
<div class="page-card-actions">
	{% if not disable_user_pass_login %}
	<button class="btn btn-sm btn-success btn-block btn-login" type="submit">
		{{ _("Login") }}</button>
	{% endif %}
	{% if ldap_settings and ldap_settings.enabled %}
	<button class="btn btn-sm btn-default btn-block btn-login btn-ldap-login">
		{{ _("Login with LDAP") }}</button>
	{% endif %}
</div>
{% endmacro %}

{% block head_include %}
{{ include_style('login.bundle.css') }}
{% endblock %}

{% macro logo_section(title=null) %}
<div class="page-card-head">
	<img class="app-logo" src="{{ logo }}">
	<!-- {% if title %}
	<h4>{{ _(title)}}</h4>
	{% else %}
	<h4>{{ _('Login to {0}').format(app_name or _("Frappe")) }}</h4>
	{% endif %} -->
	<h4 style="color:rgba(50, 50, 50, .8)">登录 - <span style="">企业数字化系统</span></h4>
	<p></p>
</div>
{% endmacro %}

{% block page_content %}
<!-- {{ for_test }} -->
<div>
	<noscript>
		<div class="text-center my-5">
			<h4>{{ _("Javascript is disabled on your browser") }}</h4>
			<p class="text-muted">
				{{ _("You need to enable JavaScript for your app to work.") }}<br>{{ _("To enable it follow the instructions in the following link: {0}").format("<a href='https://enable-javascript.com/'>enable-javascript.com</a></p>") }}
		</div>
	</noscript>
	<section class='for-login'>
		{{ logo_section() }}
		<div class="login-content page-card">
			<div class="alert alert-warning alert-dismissible fade show" role="alert">
				<span style="font-size: .8rem;">提示：<b>当前是演示系统！</b>系统会不定期清除数据。</span>
				<button type="button" class="close" data-dismiss="alert" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<form class="form-signin form-login" role="form">
				{%- if social_login or login_with_email_link -%}
				<div class="page-card-body">
					<form class="form-signin form-login" role="form">
						{{ email_login_body() }}
					</form>
					<!-- <div class="social-logins text-center">
						{% if not disable_user_pass_login or (ldap_settings and ldap_settings.enabled) %}
						<p class="text-muted login-divider">{{ _("or") }}</p>
						{% endif %}
						<div class="social-login-buttons">
							{% for provider in provider_logins %}
							<div class="login-button-wrapper">
								<a href="{{ provider.auth_url }}"
									class="btn btn-block btn-default btn-sm btn-login-option btn-{{ provider.name }}">
									{% if provider.icon %}
										{{ provider.icon }}
									{% endif %}
									{{ _("Login With {0}").format(provider.provider_name) }}</a>
							</div>
							{% endfor %}
						</div>
						{% if login_with_email_link %}
						<div class="login-with-email-link social-login-buttons">
							<div class="login-button-wrapper">
								<a href="#login-with-email-link"
									class="btn btn-block btn-default btn-sm btn-login-option btn-login-with-email-link">
									{{ _("Login with Email Link") }}</a>
							</div>
						</div>
						{% endif %}
					</div> -->
				</div>
				{% else %}
					{{ email_login_body() }}
				{%- endif -%}
			</form>
		</div>
		{%- if not disable_signup and not disable_user_pass_login -%}
		<div class="text-center sign-up-message">
			{{ _("Don't have an account?") }}
			<a href="#signup">{{ _("Sign up") }}</a>
		</div>
		{%- endif -%}
	</section>

	{%- if social_login -%}
	<section class='for-email-login'>
		{{ logo_section() }}
		<div class="login-content page-card">
			<form class="form-signin form-login" role="form">
			{{ email_login_body() }}
			</form>
		</div>
		{%- if not disable_signup and not disable_user_pass_login -%}
		<div class="text-center sign-up-message">
			{{ _("Don't have an account?") }}
			<a href="#signup">{{ _("Sign up") }}</a>
		</div>
		{%- endif -%}
	</section>
	{%- endif -%}
	<section class='for-signup {{ "signup-disabled" if disable_signup else "" }}'>
		{{ logo_section(_('Create a {0} Account').format(app_name or _("Frappe"))) }}
		<div class="login-content page-card">
			{%- if not disable_signup -%}
			{{ signup_form_template }}
			{%- else -%}
			<div class='page-card-head mb-2'>
				<span class='indicator gray'>{{_("Signup Disabled")}}</span>
				<p class="text-muted text-normal sign-up-message mt-1 mb-8">{{_("Signups have been disabled for this website.")}}</p>
				<div><a href='/' class='btn btn-primary btn-md'>{{ _("Home") }}</a></div>
			</div>
			{%- endif -%}
		</div>

	</section>

	<section class='for-forgot'>
		{{ logo_section('Forgot Password') }}
		<div class="login-content page-card">
			<form class="form-signin form-forgot hide" role="form">
				<div class="page-card-body">
					<div class="email-field">
						<input type="email" id="forgot_email" class="form-control"
							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
							<path
								d="M17.5 7.57572V5.53026C17.5 5.1686 17.3563 4.82176 17.1006 4.56603C16.8449 4.31029 16.498 4.16663 16.1364 4.16663H3.86364C3.50198 4.16663 3.15513 4.31029 2.8994 4.56603C2.64367 4.82176 2.5 5.1686 2.5 5.53026V7.57572L10 10.8333L17.5 7.57572Z"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
						</svg>

					</div>
				</div>
				<div class="page-card-actions">
					<button class="btn btn-sm btn-primary btn-block btn-forgot"
						type="submit">{{ _("Reset Password") }}</button>
					<p class="text-center sign-up-message">
						<a href="#login">{{ _("Back to Login") }}</a>
					</p>
				</div>

			</form>
		</div>
	</section>

	<section class='for-login-with-email-link'>
			{{ logo_section(_('Login with Email Link')) }}
		<div class="login-content page-card">
			<form class="form-signin form-login-with-email-link hide" role="form">
				<div class="page-card-body">
					<div class="email-field">
						<input type="email" id="login_with_email_link_email" class="form-control"
							placeholder="{{ _('Email Address') }}" required autofocus autocomplete="username">
						<svg class="field-icon email-icon" width="20" height="20" viewBox="0 0 20 20" fill="none"
							xmlns="http://www.w3.org/2000/svg">
							<path
								d="M2.5 7.65149V15.0757C2.5 15.4374 2.64367 15.7842 2.8994 16.04C3.15513 16.2957 3.50198 16.4394 3.86364 16.4394H16.1364C16.498 16.4394 16.8449 16.2957 17.1006 16.04C17.3563 15.7842 17.5 15.4374 17.5 15.0757V7.65149"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
							<path
								d="M17.5 7.57572V5.53026C17.5 5.1686 17.3563 4.82176 17.1006 4.56603C16.8449 4.31029 16.498 4.16663 16.1364 4.16663H3.86364C3.50198 4.16663 3.15513 4.31029 2.8994 4.56603C2.64367 4.82176 2.5 5.1686 2.5 5.53026V7.57572L10 10.8333L17.5 7.57572Z"
								stroke="#74808B" stroke-miterlimit="10" stroke-linecap="square" />
						</svg>
					</div>
				</div>
				<div class="page-card-actions">
					<button class="btn btn-sm btn-primary btn-block btn-login-with-email-link"
						type="submit">{{ _("Send login link") }}</button>
					<p class="text-center sign-up-message">
						<a href="#login">{{ _("Back to Login") }}</a>
					</p>
				</div>
			</form>
		</div>
	</section>

</div>
<div id="lt-footer">
	<a href="">重庆云穹科技 Co., Ltd.</a>
</div>
<style>
	#lt-footer{
		position: fixed;
		bottom: 1rem;
		font-size: .8rem;
		display: flex;
		justify-content: center;
		text-decoration: solid;
		left: 0%;
		width: 100%;
		/* border: 1px solid red; */
	}
	#lt-footer a{
		color: gray;
	}
	#particles-js {
		position: absolute;
		width: 100%;
		height: 99%;
		/* background-color: #b61924; */
		background-image: url("");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 50% 50%;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>
{% endblock %}

{% block script %}
<script>{% include "templates/includes/login/login.js" %}</script>

<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/particles.js/2.0.0/particles.js"></script>
<script>
	window.onload = function() {
		// let body = document.querySelector('body')
		// body.id = 'particles-js'
		a1()
	}
	function a1() {
		particlesJS("particles-js", {
			"particles": {
				"number": {
				"value": 380,
				"density": {
					"enable": true,
					"value_area": 1000
				}
				},
				"color": {"value": "#0e0"},
				"shape": {
					"type": "circle",
					"stroke": {"width": 0, "color": "#F00"},
					"polygon": {"nb_sides": 5},
				},
				"opacity": {
					"value": 0.3,
					"random": false,
					"anim": {
						"enable": false,
						"speed": 1,
						"opacity_min": 0.1,
						"sync": false
					}
				},
				"size": {
					"value": 3,
					"random": true,
					"anim": {
						"enable": false,
						"speed": 40,
						"size_min": 0.1,
						"sync": false
					}
				},
				"line_linked": {
					"enable": true,
					"distance": 120,
					"color": "#bbb",
					"opacity": 0.4,
					"width": .7
				},
				"move": {
					"enable": true,
					"speed": 5,
					"direction": "none",
					"random": false,
					"straight": false,
					"out_mode": "out",
					"bounce": false,
					"attract": {
						"enable": false,
						"rotateX": 800,
						"rotateY": 1500
					}
				}
			},
			"interactivity": {
				"detect_on": "canvas",
				"events": {
				"onhover": {
					"enable": true,
					"mode": "grab"
				},
				"onclick": {
					"enable": true,
					"mode": "push"
				},
				"resize": true
				},
				"modes": {
				"grab": {
					"distance": 140,
					"line_linked": {
					"opacity": 1
					}
				},
				"bubble": {
					"distance": 400,
					"size": 40,
					"duration": 2,
					"opacity": 8,
					"speed": 3
				},
				"repulse": {
					"distance": 200,
					"duration": 0.4
				},
				"push": {
					"particles_nb": 4
				},
				"remove": {
					"particles_nb": 2
				}
				}
			},
			"retina_detect": true
		});
	}
	function a2() {
		particlesJS("particles-js", {
			// 粒子的基本配置
			particles: {
			number: {
				value: 80,  // 粒子数量
				density: {
				enable: true,
				value_area: 800,  // 粒子分布密度
				},
			},
			color: {
				value: "#F00",  // 粒子颜色
			},
			shape: {
				type: "circle",  // 粒子形状，支持 circle（圆形）等
				stroke: {
				width: 0,
				color: "#000000",
				},
				polygon: {
				nb_sides: 5,
				},
			},
			opacity: {
				value: 0.5,  // 粒子透明度
				random: false,
				anim: {
				enable: false,
				speed: 1,
				opacity_min: 0.1,
				sync: false,
				},
			},
			size: {
				value: 3,  // 粒子大小
				random: true,
				anim: {
				enable: false,
				speed: 40,
				size_min: 0.1,
				sync: false,
				},
			},
			line_linked: {
				enable: true,
				distance: 150,  // 粒子间连线的距离
				color: "#ffffff",  // 粒子间连线的颜色
				opacity: 0.4,  // 粒子间连线的透明度
				width: 1,  // 粒子间连线的宽度
			},
			move: {
				enable: true,
				speed: 6,  // 粒子运动速度
				direction: "none",
				random: false,
				straight: false,
				out_mode: "out",
				bounce: false,
				attract: {
				enable: false,
				rotateX: 600,
				rotateY: 1200,
				},
			},
			},
			// 交互性的配置
			interactivity: {
			detect_on: "canvas",
			events: {
				onhover: {
				enable: true,
				mode: "repulse",  // 鼠标悬停效果
				},
				onclick: {
				enable: true,
				mode: "push",  // 鼠标点击效果
				},
				resize: true,
			},
			modes: {
				grab: {
				distance: 400,
				line_linked: {
					opacity: 1,
				},
				},
				bubble: {
				distance: 400,
				size: 40,
				duration: 2,
				opacity: 8,
				speed: 3,
				},
				repulse: {
				distance: 200,
				duration: 0.4,
				},
				push: {
				particles_nb: 4,
				},
				remove: {
				particles_nb: 2,
				},
			},
			},
			retina_detect: true,
		});
	}
  </script>
{% endblock %}

{% block sidebar %}{% endblock %}
